<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">暂停</button>
		<script>
			//requestAnimationFrame
			//requestAnimationFrame(回调函数)
			
			//作用：跟一次性定时器一样，没有时间
			//缺点：低版本IE不兼容，（代替一次定时器，周性：递归+requestAnimationFrame）
			//优点：
			//1. 跟着 浏览器的刷新频率执行，13.33  12.5HZ
			//  如果不按照这个频率走，出现丢帧，或卡着
			//2. 如果切换后台，定时器---》动画会一直执行,耗性能
			// requestAnimationFrame---》把动画暂停，再打开后，接着执行动画
			
			let timer=null;
			//启动
			timer=requestAnimationFrame(function(){
				console.log("111");
			})
			
			btn.onclick=function(){
				//停止
				cancelAnimationFrame(timer);
				timer=null;
			}
			
			//console.log(timer);//1
		</script>
	</body>
</html>
